﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <title> 使用 jquery.barousel 实现的例子. </title>


    <script src="../Scripts/jquery-1.8.2.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.barousel.js" type="text/javascript"></script>


<script type="text/javascript">

    $(document).ready(function () {
        $('#testBarousel').barousel({
            navType: 2
        });
    });

</script>



<style type="text/css">

.barousel
{
    position:relative;
    margin-bottom:0px;
    background:url(../images/bg_banner.gif) repeat 0 0;
    width:500px;
    height:401px;
    border-top:3px solid #000;
}

.barousel_image
{
    position:absolute;
    z-index:10;
    width:500px;
    height:375px;
    
    max-width : 500px; 
    max-height : 375px;
}

.barousel_image img
{
    position:absolute;
    display:none;
    
    max-width : 500px; 
    max-height : 375px;
}

.barousel_image img.default
{    
    display:block;
}

.barousel_image img.current
{
    z-index:10;
}

.barousel_image img.previous
{
    z-index:5;
}

.barousel_content
{
    position:absolute;
    padding:15px 18px 0 18px;    
    z-index:50;
    background:url(/images/bg_barousel_content.png) repeat 0 0;
    color:#fff;
    width:247px;
    bottom:36px;
    left:10px;
}

.barousel_content div
{
    display:none;    
}

.barousel_content div.default
{
    display:block;    
}

.barousel_content p
{
    font-size:13px;
    font-weight:normal; 
    line-height:17px;
    
}

.barousel_content p.header
{
    font-size:28px;
    font-weight:normal;
    line-height:28px;
    color:#fff55b;
}

.barousel_content a,
.barousel_content a:hover
{
    color:#fff55b;
    background-color:transparent !important;
}

.barousel_nav
{
    position:absolute;
    padding:3px 3px 0px 0;
    height:23px;    
    background:#000;
    bottom:0;
    z-index:20;
    width:497px;
}

.barousel_nav .counter
{    
    float:right;
    font-size:0.75em;
    color:#fff;
    margin:3px 5px 0 0;
}

.barousel_nav ul
{
    float:right;
    padding:0;
    margin:0;
}

.barousel_nav li
{
    float:left;
    padding-left:3px;
    font-size:0;
    line-height:0;
    list-style:none;
}

.barousel_nav li a
{
    display:block;
    width:25px;
    height:20px;
    background-color:#4d4d4d;
    font-size:0;
    line-height:0;
    text-decoration:none;
}

.barousel_nav li a:hover
{
    background-color:#6e6e6e;
}

.barousel_nav li a.current
{
    background-color:#fff55b;
}

.barousel_nav li.prev a
{
    background-image:url(/images/barousel_link_previous.gif);
    background-repeat:no-repeat;
    background-position:0 0;
}

.barousel_nav li.next a
{
    background-image:url(/images/barousel_link_next.gif);
    background-repeat:no-repeat;
    background-position:0 0;
}

.barousel img.ajax_loader
{
    display:none;
    position:absolute;
    z-index:99;
    top:70px;
    left:135px;
}


</style>  



</head>
<body>




参数：
<table style="white-space: pre-wrap">
  <tr>
    <th>Option</th>	 <th>Description</th>	 <th>Default</th>
  </tr>
  <tr>
    <td>imageWrapper</td>	<td>image container selector</td>	<td>'.barousel_image'</td>
  </tr>
  <tr>
    <td>contentWrapper</td>	<td>content container selector</td>	<td>'.barousel_content'</td>
  </tr>
  <tr>
    <td>navWrapper</td>	<td>navigation container selector</td>	<td>'.barousel_nav'</td>
  </tr>
  <tr>
    <td>slideDuration</td>	<td>duration of each slide in milliseconds</td>	<td>5000 (5 seconds)</td>
  </tr>
  <tr>
    <td>navType</td>	<td>navigation type: 
1 = item navigation;
2 = previous/next navigation;
3 = custom navigation (when using Thslide for example)	</td>	<td>1 (item navigation)</td>
  </tr>
  <tr>
    <td>fadeIn</td>	<td>fade between slides: 0 or 1	</td>	<td>1 (activated)</td>
  </tr>
  <tr>
    <td>fadeInSpeed</td>	<td>fade duration in milliseconds</td>	<td>600 (0.6 seconds)</td>
  </tr>
  <tr>
    <td>manualCarousel</td>	<td>carousel mode: 0 = automatic; 1 = manual</td>	<td>0 (automatic)</td>
  </tr>
  <tr>
    <td>contentResize</td>	<td>resize content container: 0 or 1</td>	<td>1 (activated)</td>
  </tr>
  <tr>
    <td>contentResizeSpeed</td>	<td>content resize speed in milliseconds</td>	<td>300 (0.3 seconds)</td>
  </tr>
</table>







<div id="testBarousel" class="barousel">
    <div class="barousel_image">
        <!-- image -->
        <img src="../images/1.jpg" alt="" class="default" />
        <img src="../images/2.jpg" alt=""  />
        <img src="../images/3.jpg" alt=""  />
        <img src="../images/4.jpg" alt=""  />
        <img src="../images/5.jpg" alt=""  />
    </div>

    <div class="barousel_content">
        <!-- content 1 -->
        <div class="default">
            <p class="header">图片 1</p>
            <p> 图片1的相关描述 </p>
            <p><a href="#">链接 1</a></p>
        </div>
        <!-- content 2 -->
        <div>
            <p class="header">图片 2</p>
            <p> 图片2的相关描述 </p>
            <p><a href="#">链接 2</a></p>
        </div>
        <!-- content xx -->
        <div>
             <p class="header">图片 3</p>
            <p> 图片3的相关描述 </p>
            <p><a href="#">链接 3</a></p>
        </div>
        <div>
             <p class="header">图片 4</p>
            <p> 图片4的相关描述 </p>
            <p><a href="#">链接 4</a></p>
        </div>
        <div>
             <p class="header">图片 5</p>
            <p> 图片5的相关描述 </p>
            <p><a href="#">链接 5</a></p>
        </div>
    </div>
    <div class="barousel_nav">
    </div>
</div>



</body>
</html>
